<template>
	<d2-container>
		<template>
			<div class="form-area">
				<el-form ref="detailForm" :model="formData" label-width="110px" style="height:auto">
					<div class="form-title"><h3>上班签到</h3></div>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="日期：" prop="weekday">
								<el-date-picker v-model="formData.shopCashierChangeShift.weekday" type="date" placeholder="日期" readonly></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="签到时间：" prop="signInTime">
								<el-date-picker v-model="formData.shopCashierChangeShift.signInTime" type="time" placeholder="签到时间" readonly></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="收银员实名：" prop="realName">
								<el-input type="text" v-model="formData.shopCashierChangeShift.realName" placeholder="收银员实名" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="门店名称：" prop="shopName">
								<el-input type="text" v-model="formData.shopCashierChangeShift.shopName" placeholder="门店名称" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title"><h3>下班签退</h3></div>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="日期：" prop="weekday">
								<el-date-picker v-model="formData.shopCashierChangeShift.weekday" type="date" placeholder="日期" readonly></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="签退时间：" prop="signOutTime">
								<el-date-picker v-model="formData.shopCashierChangeShift.signOutTime" type="time" placeholder="签退时间" readonly></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="收银员实名：" prop="realName">
								<el-input type="text" v-model="formData.shopCashierChangeShift.realName" placeholder="收银员实名" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="门店名称：" prop="shopName">
								<el-input type="text" v-model="formData.shopCashierChangeShift.shopName" placeholder="门店名称" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
                        <el-col :span="24">
							<el-form-item label="交接备注" prop="remark">
								<el-input type="textarea" :rows="4" v-model="formData.shopCashierChangeShift.remark" placeholder="交接备注" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="24">
							<div class="form-table">
									<el-table :data="formData.tableDataOrder" stripe border show-summary :summary-method="getSummaries" style="width: 100%">
										<el-table-column prop="index" label="序号" width="50" type="index"></el-table-column>
										<el-table-column prop="orderNo" label="订单号"></el-table-column>
										<el-table-column prop="createTime" label="下单时间" :formatter="forDateCreate"></el-table-column>
										<el-table-column prop="isPaid" label="支付状态">
											<template slot-scope="scope">
										        <el-tag v-if="scope.row.isPaid==0">未支付</el-tag>
										        <el-tag v-if="scope.row.isPaid==2">已支付</el-tag>
										    </template>
										</el-table-column>	
										<el-table-column prop="payType" label="支付方式">
											<template slot-scope="scope">
										        <el-tag v-if="scope.row.payType==1">账户支付</el-tag>
										        <el-tag v-if="scope.row.payType==2">现金支付</el-tag>
												<el-tag v-if="scope.row.payType==3">通联支付</el-tag>
										    </template>
										</el-table-column>
										<el-table-column prop="orderStatus" label="订单状态">
											<template slot-scope="scope">
										        <el-tag v-if="scope.row.orderStatus==0">初始状态</el-tag>
												<el-tag v-if="scope.row.orderStatus==1">待付款</el-tag>
										        <el-tag v-if="scope.row.orderStatus==2">已付款</el-tag>
												<el-tag v-if="scope.row.orderStatus==3">已取消</el-tag>
										    </template>
										</el-table-column>
										<el-table-column prop="productName" label="商品名称"></el-table-column>
										<el-table-column prop="productSkuName" label="SKU名称"></el-table-column>
										<el-table-column prop="quantity" label="数量"></el-table-column>
										<el-table-column prop="unitName" label="单位"></el-table-column>
										<el-table-column prop="price" label="销售单价(元)"></el-table-column>
										<el-table-column prop="memberCoupon" label="消费券(元)"></el-table-column>
										<el-table-column prop="orderAmount" label="金额小计(元)"></el-table-column>
										<el-table-column prop="couponAmountSubtotal" label="消费券小计(元)"></el-table-column>
									</el-table>
							</div>
							<div class="page">
								<el-pagination
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="currentPage"
									:page-sizes="[10, 20, 50, 100]"
									:page-size="pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="total"
								></el-pagination>
							</div>
						</el-col>
					</el-row>

					<div class="form-title"><h3>金额统计</h3></div>
					<el-row :gutter="20">
                        <el-col :span="24">
							<el-form-item label="订单金额总计" prop="orderTotalAmount">
								{{formData.orderStatistics.orderTotalAmount!=undefined?formData.orderStatistics.orderTotalAmount.toFixed(2):"0.00"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								[&nbsp;&nbsp;&nbsp;
								 线下微信收款：{{formData.orderStatistics.wxTotalAmount!=undefined?formData.orderStatistics.wxTotalAmount.toFixed(2):"0.00"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								 线下支付宝收款：{{formData.orderStatistics.alipayTotalAmount!=undefined?formData.orderStatistics.alipayTotalAmount.toFixed(2):"0.00"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								 账户支付：{{formData.orderStatistics.accountTotalAmount!=undefined?formData.orderStatistics.accountTotalAmount.toFixed(2):"0.00"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								 现金收款：{{formData.orderStatistics.cashTotalAmount!=undefined?formData.orderStatistics.cashTotalAmount.toFixed(2):"0.00"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								 通联收款：{{formData.orderStatistics.allinTotalAmount!=undefined?formData.orderStatistics.allinTotalAmount.toFixed(2):"0.00"}}
								&nbsp;&nbsp;&nbsp;]
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
                        <el-col :span="24">
							<el-form-item label="消费券总计" prop="couponTotalAmount">
								{{formData.orderStatistics.couponTotalAmount!=undefined?formData.orderStatistics.couponTotalAmount.toFixed(2):"0.00"}}
							</el-form-item>
						</el-col>
					</el-row>

					<!-- 按钮 -->
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item>
								<div class="form-submit">
									<el-button type="primary" plain class="form-cancle-btn" @click="closeCurrentPage()">关闭</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

		</template>
	</d2-container>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { findShopCashierChangeShiftDetail, queryOrderDetailShift, queryOrderDetailShiftStatistics } from '@api/shopCashierChangeShift/shopCashierChangeShift'
import dayjs from 'dayjs'
export default {
  name: 'shopCashierChangeShift-detail',
  data () {
    return {
      shopCashierChangeShiftId: '',
      formData: {
        shopCashierChangeShift: {
		  cashierId: '',
          weekday: '',
          realName: '',
          shopName: '',
          signInTime: '',
          signOutTime: '',
          remark: ''
        },
		tableDataOrder: [],
		orderStatistics: {
			orderTotalAmount: 0,
			moneyTotalAmount: 0,
			couponTotalAmount: 0,
			wxTotalAmount: 0,
			alipayTotalAmount: 0,
			cashTotalAmount: 0,
			allinTotalAmount: 0,
			accountTotalAmount: 0
		}
      },
	  currentPage: 1,
	  pageSize: 10,
	  total: 0,
	  isReturnList: false
    }
  },
  created () {},
  mounted () {
    this.shopCashierChangeShiftId = sessionStorage.getItem('shopCashierChangeShiftId')
    if (this.shopCashierChangeShiftId == null || this.shopCashierChangeShiftId == undefined) {
      return
    }
    this.fetchData(this.shopCashierChangeShiftId)
  },
  beforeDestroy () {
    // 跳转到列表页面
    if (this.isReturnList) {
      this.$router.push({
		  path: 'shopCashierChangeShift/index',
		  name: 'shopCashierChangeShift-index',
		  params: ''
      })
    }
  },
  watch: {},
  computed: {
    ...mapState('d2admin/page', ['opened', 'current'])
  },
  methods: {
    ...mapActions('d2admin/page', ['close']),
    // 关闭
    closeCurrentPage () {
      // 关闭当前窗口
	  this.isReturnList = true
      let tagName = this.current
      this.close({ tagName })
    },
    fetchData (shopCashierChangeShiftId) {
      findShopCashierChangeShiftDetail({ id: shopCashierChangeShiftId })
        .then(res => {
          if (res.code == '000000') {
            this.formData.shopCashierChangeShift = res.data
			this.fetchDataOrder()
			this.fetchDataOrderStatistics()
          } else {
            this.$message({ message: '详情加载失败，请重试!', type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
	fetchDataOrder () {
      queryOrderDetailShift({ 
		  cashierId: this.formData.shopCashierChangeShift.cashierId,
		  timeBegin: dayjs(this.formData.shopCashierChangeShift.signInTime).format('YYYY-MM-DD HH:mm:ss'),
		  timeEnd: dayjs(this.formData.shopCashierChangeShift.signOutTime).format('YYYY-MM-DD HH:mm:ss'),
        currentPage: this.currentPage,
        pageSize: this.pageSize
		   })
        .then(res => {
          if (res.code == '000000') {
            this.formData.tableDataOrder = res.data.content
			this.total = res.data.total
          } else {
            this.$message({ message: '详情订单加载失败，请重试!', type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
	fetchDataOrderStatistics () {
      queryOrderDetailShiftStatistics({ 
		  cashierId: this.formData.shopCashierChangeShift.cashierId,
		  timeBegin: dayjs(this.formData.shopCashierChangeShift.signInTime).format('YYYY-MM-DD HH:mm:ss'),
		  timeEnd: dayjs(this.formData.shopCashierChangeShift.signOutTime).format('YYYY-MM-DD HH:mm:ss')
	   })
        .then(res => {
          if (res.code == '000000') {
			  this.formData.orderStatistics = res.data
          } else {
            this.$message({ message: '详情订单统计加载失败，请重试!', type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
	forDateCreate (row, column) {
        return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
	getSummaries (param) {
		const { columns, data } = param;
		const sums = [];
		columns.forEach((column, index) => {
		  if(index === 7) {
			sums[index] = '合计';
			return;
		 }
		 const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            if(index==12||index==13){
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] = Number(sums[index]).toFixed(2);
            }
          } else {
            sums[index] = '';
          }
		});
		return sums;
	},
	handleSizeChange (val) {
	    this.pageSize = val
		this.fetchDataOrder()
	},
	handleCurrentChange (val) {
	    this.currentPage = val
		this.fetchDataOrder()
	}
  }
}
</script>
